<template>
	<view>
		<view class="content">
			<view class="fl">是否开票</view>
			<view class="fr">
				<view :class="navIndex==0?'active':''" @click="checkIndex(0)">开具发票</view>
				<view :class="navIndex==1?'active':''" @click="checkIndex(1)">不开发票</view>
			</view>
		</view>
		<view class="middle">
			<view class="middle_key" @click="shipment()">
				<view class="middle_fl">装</view>
				<view class="middle_fr">
					<view class="minor_fl" v-if="shipZone">
						<view class="minor_top">
							<text>{{shipZone}}</text>
							<text>{{shipAddress}}</text>
						</view>
						<view class="minor_box">
							<text class="text_fl">{{shipContact}}</text>
							<text class="text_fr">{{shipTelphone}}</text>
						</view>
					</view>
					<view class="minor_fl" v-else>
						<view class="minor_top">
							<text>请填写装货地址</text>
						</view>
						<view class="minor_box">
							<text class="text_fl">联系人</text>
							<text class="text_fr">手机号</text>
						</view>
					</view>
					<view class="minor_fr">
						<image src="../../static/iocn12.png"></image>
					</view>
				</view>
			</view>

			<view class="middle_key middle_list" @click="dischargecargo()">
				<view class="middle_fl">卸</view>
				<view class="middle_fr">
					<view class="minor_fl" v-if="receiveZone">
						<view class="minor_top">
							<text>{{receiveZone}}</text>
							<text>{{receiveAddress}}</text>
						</view>
						<view class="minor_box">
							<text class="text_fl">{{receiveContact}}</text>
							<text class="text_fr">{{receiveTelphone}}</text>
						</view>
					</view>
					<view class="minor_fl" v-else>
						<view class="minor_top">
							<text>请填写卸货地址</text>
						</view>
						<view class="minor_box">
							<text class="text_fl">联系人</text>
							<text class="text_fr">手机号</text>
						</view>
					</view>
					<view class="minor_fr">
						<image src="../../static/iocn12.png"></image>
					</view>
				</view>
			</view>

		</view>
		
		
		<view class="success">
			<view class="success_key" @click="information()">
				<view class="success_fl">货物信息</view>
				<view class="success_fr">
					<text v-if="goodsName">{{goodsName}} {{goodsPackagMethod}} {{goodsWeight}} {{goodsSize}}</text>
					<text v-else>请填写货物信息</text>
					<image src="../../static/iocn11.png"></image>
				</view>
			</view>
			<view class="success_key" @click="motorcycle()">
				<view class="success_fl">车长车型</view>
				<view class="success_fr">
					<text v-if="demandLength">{{demandLength}} {{demandStyle}} {{demandLoad}}</text>
					<text v-else>请填写车型信息</text>
					<image src="../../static/iocn11.png"></image>
				</view>
			</view>
			<view class="success_key">
				<view class="success_fl">用车类型</view>
				<view class="success_fr">
					<text class="divider" :class="lesscarload==0?'active':''" @click="checkmdex(0)">零担</text>
					<text class="divider" :class="lesscarload==1?'active':''" @click="checkmdex(1)">整车</text>
				</view>
			</view>
		</view>
		
		<view class="nextstep" @click="Confirm()">下一步</view>
		<view>
			<Tabbar :current="'0'"></Tabbar>
		</view>
	</view>
</template>

<script>
	import {GetDics,WayBillCreate} from '@/public/Api/update.js'
	import {
		setValue,
		getValue
	} from '@/public/storeage/index.js'
	import Tabbar from '@/pages/navigation/navigation.vue';
	export default {
		components: {
			//注册组件
			Tabbar
		},
		data() {
			return {
				navIndex:0,
				lesscarload:0,
				needInvoiced:true,
				demandLength:'',
				demandStyle:'',
				demandLoad:'',
				goodsName:'',
				goodsPackagMethod:'',
				goodsWeight:'',
				goodsSize:'',
				shipZone:'',
				shipAddress:'',
				shipContact:'',
				shipTelphone:'',
				shipCompany:'',
				receiveZone:'',
				receiveAddress:'',
				receiveContact:'',
				receiveTelphone:'',
				receiveCompany:'',
				shipLocation1:'',
				shipLocation2:'',
				receiveLocation1:'',
				receiveLocation2:''
			}
		},
		onShow() {
			var demandLength = getValue('demandLoad')
			if(demandLength){
				this.demandLength = getValue('demandLength')
				this.demandStyle = getValue('demandStyle')
				this.demandLoad = getValue('demandLoad')
			}
			
			var goodsName = getValue('goodsName')
			if(goodsName){
				this.goodsName = getValue('goodsName')
				this.goodsPackagMethod = getValue('goodsPackagMethod')
				this.goodsWeight = getValue('goodsWeight')
				this.goodsSize = getValue('goodsSize')
			}
			
			var shipZone = getValue('shipZone')
			if(shipZone){
				this.shipZone = getValue('shipZone')
				this.shipAddress = getValue('shipAddress')
				this.shipContact = getValue('shipContact')
				this.shipTelphone = getValue('shipTelphone')
				this.shipCompany = getValue('shipCompany')
				this.shipLocation1=getValue('latitude')
				this.shipLocation2=getValue('longitude')
			}
			
			var receiveZone = getValue('receiveZone')
			if(receiveZone){
				this.receiveZone = getValue('receiveZone')
				this.receiveAddress = getValue('receiveAddress')
				this.receiveContact = getValue('receiveContact')
				this.receiveTelphone = getValue('receiveTelphone')
				this.receiveCompany = getValue('receiveCompany')
				this.receiveLocation1=getValue('latitude1')
				this.receiveLocation2=getValue('longitude1')
			}
		
		},
		methods: {
			checkIndex(e){
				this.navIndex = e
				if(e == 0){
					this.needInvoiced = true
				}else{
					this.needInvoiced = false
				}
				console.log(this.needInvoiced)
			},
			checkmdex(e){
				this.lesscarload = e
			},
			dischargecargo(){
				uni.navigateTo({
					url: '/pages/Releasesource/dischargecargo'
				})
			},
			information(){
				uni.navigateTo({
					url: '/pages/Releasesource/information'
				})
			},
			motorcycle(){
				uni.navigateTo({
					url: '/pages/Releasesource/motorcycle'
				})
			},
			shipment(){
				uni.navigateTo({
					url: '/pages/Releasesource/shipment'
				})
			},
			async Confirm(){
				var shipZone = this.shipZone
				var receiveZone = this.receiveZone
				var goodsName = this.goodsName
				var demandLength = this.demandLength
				var lesscarload = this.lesscarload
				var needInvoiced = this.needInvoiced
				var demandStyle = this.demandStyle
				var demandLoad = this.demandLoad
				var goodsName = this.goodsName
				var goodsPackagMethod = this.goodsPackagMethod
				var goodsWeight = this.goodsWeight
				var goodsSize = this.goodsSize
				var shipAddress = this.shipAddress
				var shipContact = this.shipContact
				var shipTelphone = this.shipTelphone
				var shipCompany = this.shipCompany
				var receiveAddress = this.receiveAddress
				var receiveContact = this.receiveContact
				var receiveTelphone = this.receiveTelphone
				var receiveCompany = this.receiveCompany
				var shipLocation=`${this.shipLocation1},${this.shipLocation2}`
				var receiveLocation=`${this.receiveLocation1},${this.receiveLocation2}`
				var shiperId = getValue('id')
				var placeShip = getValue('placeShip')
				var placeReceive = getValue('placeReceive')
				if (shipZone == '') {
					uni.showToast({
						title: "装货地址不能为空",
						icon: 'none',
						duration: 2000
					})
					return false
				}
				if (receiveZone == '') {
					uni.showToast({
						title: "卸货地址不能为空",
						icon: 'none',
						duration: 2000
					})
					return false
				}
				if (goodsName == '') {
					uni.showToast({
						title: "货物信息不能为空",
						icon: 'none',
						duration: 2000
					})
					return false
				}
				if (demandLength == '') {
					uni.showToast({
						title: "车长车型不能为空",
						icon: 'none',
						duration: 2000
					})
					return false
				}
				
				try {
					const {
						data: res
					} = await WayBillCreate({
						lesscarload,
						needInvoiced,
						demandLength,
						demandStyle,
						demandLoad,
						goodsName,
						goodsPackagMethod,
						goodsWeight,
						goodsSize,
						shipZone,
						shipAddress,
						shipContact,
						shipTelphone,
						shipCompany,
						receiveZone,
						receiveAddress,
						receiveContact,
						receiveTelphone,
						receiveCompany,
						shiperId,
						placeShip,
						placeReceive,
						shipLocation,
						receiveLocation
					})
					setValue('demandLength','');
					setValue('goodsName','');
					setValue('shipZone','');
					setValue('receiveZone','');
					setValue('yudanid',res.result.id);
					uni.navigateTo({
						url: '/pages/Releasesource/Confirm',
					})
				} catch (e) {}
				
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
		padding: 0 15upx;
	}

	.content {
		width: 100%;
		background-color: #fff;
		padding: 20upx;
		box-shadow: 1.75upx 1.75upx 7.01upx 0px #e5e5e5, 1.75upx 1.75upx 7.01upx 0px #e5e5e5;
		margin-top: 20upx;
		border-radius: 20upx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.fl {
			font-size: 32upx;
			color: #000;
			font-weight: bold;
		}

		.fr {
			display: flex;
			align-items: center;

			view {
				margin-left: 20upx;
				width: 140upx;
				height: 50upx;
				opacity: 1;
				border-radius: 10upx;
				border: 2upx solid #EF4D3D;
				font-size: 28upx;
				color: #EF4D3D;
				text-align: center;
				line-height: 46upx;
			}

			.active {
				width: 140upx;
				height: 50upx;
				opacity: 1;
				border-radius: 10upx;
				background: #EF4D3D;
				font-size: 28upx;
				color: #fff;
				text-align: center;
				line-height: 50upx;
			}
		}
	}

	.middle {
		margin-top: 23upx;
		background-color: #fff;
		box-shadow: 1.75upx 1.75upx 7.01upx 0px #e5e5e5, 1.75upx 1.75upx 7.01upx 0px #e5e5e5;
		border-radius: 20upx;


		.middle_key {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20upx 30upx;

			.middle_fl {
				width: 56upx;
				height: 56upx;
				opacity: 1;
				border-radius: 10upx;
				background: #FFC300;
				font-size: 38upx;
				color: #fff;
				font-weight: bold;
				text-align: center;
				line-height: 56upx;
			}

			.middle_fr {
				padding-left: 45upx;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				width: 604upx;

				.minor_fl {
					.minor_top {
						text {
							display: block;
							font-size: 25upx;
							font-weight: bold;
							line-height: 35upx;
						}
					}

					.minor_box {
						display: flex;
						align-items: center;
						padding-top: 12upx;

						text {
							font-size: 24upx;
						}

						.text_fl {
							width: 140upx;
							text-align: left;
							border-right: 1upx solid #ccc;
						}

						.text_fr {
							padding-left: 60upx;
						}
					}
				}

				.minor_fr {
					image {
						width: 32upx;
						height: 32upx;
					}
				}
			}
		}
		.middle_list {
			border-top: 2upx solid #E5E5E5;
			.middle_fl{
				background-color: #EF4D3D;
			}
		}
	}
	
	.success{
		width: 100%;
		background-color: #fff;
		padding: 0 20upx;
		box-shadow: 1.75upx 1.75upx 7.01upx 0px #e5e5e5, 1.75upx 1.75upx 7.01upx 0px #e5e5e5;
		margin-top: 20upx;
		border-radius: 20upx;
		.success_key{
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 100upx;
			.success_fl{
				font-size: 28upx;
				font-weight: bold;
			}
			.success_fr{
				display: flex;
				align-items: center;
				text{
					font-size: 24upx;
					color: #808080;
				}
				image{
					width: 32upx;
					height: 32upx;
					margin-left: 30upx;
				}
				
				.divider{
					width: 87upx;
					height: 50upx;
					opacity: 1;
					border-radius: 10upx;
					background: #FFFFFF;
					border: 2upx solid #EF4D3D;     
					font-size: 28upx;
					font-weight: bold;
					text-align: center;
					color: #000;
					line-height: 46upx;
					margin-left: 20upx;
				}
				.active{
					background-color: #EF4D3D;
					color: #fff;
				}
			}
		}
	}
	
	.nextstep{
		width: 171upx;
		height: 71upx;
		opacity: 1;
		border-radius: 17upx;
		background: #EF4D3D;
		font-size: 31upx;
		margin-top: 32upx;
		text-align: center;
		color: #fff;
		line-height: 71upx;
		font-weight: bold;
		float: right;
	}
</style>
